<template>
  <el-dialog
    :title="id ? '拒付处理费表修改' : '拒付处理费表添加'"
    :visible.sync="dialogVisible"
    width="60%"
    :close-on-click-modal="false"
  >
    <el-form ref="main-form" :model="form"  label-width="120px" :rules="rules" :inline="true">
      <el-form-item
        label="拒付处理费表名"
        label-width="180px"
        size="mini"
        prop="name"
      >
        <el-row>
          <el-input
            placeholder=""
            v-model="form.name"
            @keyup.enter.native="submit"
            clearable
             :style="{ width: '70%' }"
          ></el-input>
          <el-button @click="addContent" type="primary" size=""
            >添加公式</el-button
          >
        </el-row>
      </el-form-item>

      <div v-for="(channel, key) in form.content" :key="key">
        <h4>
          阶梯公式<el-link
            type="danger"
            style="float: right"
            @click="form.content.splice(key, 1)"
            >移除</el-link
          >
        </h4>
        <el-form-item label="拒付率≥" size="mini" prop="">
          <el-input
            type="number"
            placeholder=""
            v-model="channel.rate"
            @keyup.enter.native="submit"
            clearable
          >
            <template slot="append">%</template></el-input>
        </el-form-item>
        <el-form-item label="且拒付笔数≥" size="mini" prop="">
          <el-input
            type="number"
            placeholder=""
            v-model="channel.count"
            @keyup.enter.native="submit"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="收取" size="mini" prop="">
          <el-input
            type="number"
            placeholder=""
            
            v-model="channel.disFee"
            @keyup.enter.native="submit"
            clearable
          >
          
           <template slot="append">元/笔</template></el-input>
          
          <!-- <template slot="append">.com</template> -->
        </el-form-item>
      </div>
      <el-form-item label="备注" size="mini">
        <el-input
          placeholder="备注"
          v-model="form.remark"
          @keyup.enter.native="submit"
          clearable
        ></el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <!-- <el-popover
        v-if="id != null"
        placement="top"
        width="160"
        v-model.number="popDeleteVisible">
        <p>确定删除吗？</p>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="default" @click="popDeleteVisible = false">取消</el-button>
          <el-button type="danger" size="mini" @click="submitDel">确定</el-button>
        </div>
        <el-button type="danger" slot="reference"  size="small" style="float: left;" :loading="loading">删 除</el-button>
      </el-popover> -->

      <el-button @click="close" size="small">取 消</el-button>
      <el-button type="primary" @click="submit" size="small" :loading="loading"
        >提 交</el-button
      >
    </div>
  </el-dialog>
</template>

<script>

import ApiMain from '@/api/mch.protest';
import ApiRateBoc from '@/api/exchangeRate.rateBoc';
import { settleTypeOptions } from '@/const/constant'

export default {
  mixins: [
  ],
  props: [
  ],
  data() {
    return {

      dialogVisible: false,
      popDeleteVisible: false,
      loading: false,

      form: {
        content:[],
        name: '',
        remark: '',
      },

      rules: {
        name: [
          { required: true, message: '请输入费率名称', trigger: 'blur' },
        ],

        count: [
          { required: true, message: '请输入保证金结算周期', trigger: 'blur' },
          { pattern: /^\d+$/, message: '只能输入整数', trigger: 'change' },
        ],

        disFee: [
          {  required: true, pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        rate: [
          {  required: true, pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        bondWithdrawPeriod: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        transPerFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        withdrawPerFee: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        minTransAmount: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
        maxTransAmount: [
          { pattern: /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/, message: '最多两位小数', trigger: 'change' }
        ],
      },

      id: null,
      data: null,

      settleTypeOptions: settleTypeOptions

    }
  },
  mounted() {
  },

  methods: {

    show(id = null) {

      this.id = id;

      if (this.id) {
        this.fetchData();
      }
      else {
        this.reset();
      }

      this.dialogVisible = true;
    },

    close() {
      this.dialogVisible = false;
      this.$emit('dialog-close');
    },

    reset() {
      this.form = {
        content:[],
        name: '',
        remark: '',
      };
    },

    addContent() {
      console.log(this.form)
      this.form.content.push({
        count: null,
        disFee: null,
        rate: null,
      })
    },
    handleFormatInputNum(e, value) {
      console.log(e, value)
    },

    fetchData() {

      ApiMain.info({ id: this.id })
        .then(re => {
          this.data = re;

        })
        .catch(() => {
          this.data = null;
        })
        .finally(() => {
          this.renderData();
        });
    },

    renderData() {

      this.form.id = this.data.id;
      this.form.name = this.data.name
      this.form.remark = this.data.remark
      // this.form.createBy = this.data.createBy
      // this.form.createTime = this.data.createTime
      // this.form.updateTime = this.data.updateTime
      // this.form.updateBy = this.data.updateBy
      this.data.content.forEach(item => {
        item.disFee = item.disFee / 100;
        item.rate = item.rate / 100;
      })
      this.form.content = this.data.content


    },

    verifyForm() {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit() {

      if (!this.verifyForm()) return false;
      let isRetrun = false
      this.form.content.forEach(item => {
        if (item.rate <= 0 || item.rate > 100) {
          this.$message.info('交易费率在0-100区间')
          return
        }
        if (!item.disFee) return this.$message.info('请输入手续费')
        if (!item.count) return this.$message.info('请输入笔数')
        
      })


      if (isRetrun) return

      this.loading = true;

      try {
        if (this.id) {
          await this.submitSet();
        }
        else {
          await this.submitAdd();
        }
      } finally {
        this.loading = false;
      }
    },

    async submitDel() {

      this.popDeleteVisible = false;
      this.loading = true;

      await ApiMain.del({ id: this.id });

      this.loading = false;
      this.close();
      this.$message({ message: '删除成功', type: 'success' });
    },

    async submitSet() {
      this.form.id = this.id;
      let form = this.formatForm()
      await ApiMain.set(form);
      this.$message({ message: '修改成功', type: 'success' });
      this.close();

    },

    async submitAdd() {
      let form = this.formatForm()
      await ApiMain.add(form);
      this.$message({ message: '添加成功', type: 'success' });
      this.close();
    },

    formatForm() {
      // form.perFee = (form.perFee == '' ? 0 : Number((form.perFee * 100)).toFixed(0))
      // form.serviceFee = Number((form.serviceFee == '' ? 0 : Number((form.serviceFee * 100)).toFixed(0)))
      // form.bondFee = Number((form.bondFee == '' ? 0 : Number((form.bondFee * 100)).toFixed(0)))
      // form.bondWithdrawPeriod = (form.bondWithdrawPeriod == '' ? 0 : Number((form.bondWithdrawPeriod * 100)).toFixed(0))
      // form.transPerFee = (form.transPerFee == '' ? 0 : Number((form.transPerFee * 100)).toFixed(0))
      // form.withdrawPerFee = (form.withdrawPerFee == '' ? 0 : Number((form.withdrawPerFee * 100)).toFixed(0))
      // form.minWithdrawAmount = (form.minWithdrawAmount == '' ? 0 : Number((form.minWithdrawAmount * 100)).toFixed(0))
      // form.maxWithdrawAmount = (form.maxWithdrawAmount == '' ? 0 : Number((form.maxWithdrawAmount * 100)).toFixed(0))
      // form.minTransAmount = (form.minTransAmount == '' ? 0 : Number((form.minTransAmount * 100)).toFixed(0))
      // form.maxTransAmount = (form.maxTransAmount == '' ? 0 : Number((form.maxTransAmount * 100)).toFixed(0))
      let form = Object.copy(this.form);
      form.content.forEach(item => {
        item.disFee = item.disFee * 100;
        item.rate = item.rate * 100;
      })
      return form
    }
  }
}
</script>

<style>
</style>
